<template>
  <div class="login-page">
    <!--        修改的头部-->
    <div class="login-top">
      <div class="logoBox"><img src="/img/bg/logo.jpg" /></div>
      <p>AI智慧校园</p>
    </div>
    <!--    重置密码-->
    <div class="repassword">
      <h3>重置密码</h3>
      <p class="dx"><input type="radio" checked="checked" />手机号找回</p>
      <P class="tell"
        >+86&nbsp;&nbsp;<span>|</span
        ><input type="tel" placeholder="请输入手机号" class="tel"
      /></P>
      <input type="text" placeholder="请输入验证码" class="Code" />
      <button class="obtain">获取验证码</button>
      <el-button
        type="primary"
        size="small"
        class="login-submit"
        @click.native.prevent="handleLogin"
        >重置密码</el-button
      >
      <p class="login-tip">记起密码？<a href="#">立即登录</a></p>
    </div>

    <!--        修改的脚部-->
    <div class="login-footer">
      <div class="login-sbox">
        <ul>
          <li>
            <a href="#">联系客服</a>
          </li>
          <li>|</li>
          <li>
            <a href="#">加入我们</a>
          </li>
          <li>|</li>
          <li>
            <a href="#">关于我们</a>
          </li>
          <li>|</li>
          <li>
            <a href="#">友情链接</a>
          </li>
        </ul>
      </div>
      <div class="login-copyright">
        {{ website.copyright}}
        &nbsp; <a href="https://beian.miit.gov.cn/" target="_blank" style="color: #999;font-size: 14px;">ICP证：{{ website.icpURL }}</a>
      <a
          target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44011202001838"
          style="
            display: inline-block;
            text-decoration: none;
            height: 20px;
            line-height: 20px;
            vertical-align: middle;
            margin-left: 12px;
          "
        >
          <img
            src="../../../public/img/PublicSecurity.png"
            style="float: left; width: 16px; height: 16px; vertical-align: middle;"
          />
          <p
            style="
              float: left;
              height: 20px;
              line-height: 20px;
              margin: 0px 0px 0px 5px;
              color: #939393;
            "
          >
            粤公网安备 44011202001838号
          </p>
        </a>
        &nbsp;{{ website.companyName }}
      </div>
     
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "reset",
  computed: {
    ...mapGetters(["website"]),
  },
};
</script>

<style scoped>
.repassword {
  width: 500px;
  height: 480px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /*box-shadow:  0 2px 6px 0 rgba(145, 145, 145, 17);*/
  background-color: #fff;
  border-radius: 8px;
  padding: 0 60px;
}
.repassword h3 {
  font-size: 17px;
  text-align: center;
  padding-top: 30px;
}
.dx {
  font-size: 14px;
  color: #999;
  padding: 32px 0 10px 0;
}
.tell {
  width: 100%;
  text-indent: 15px;
  border-radius: 4px;
  border: 1px solid #c3cbd6;
}
.tell span {
  color: #bbbbbb;
}
.tel {
  /*width: 100%;*/
  text-indent: 15px;
  border-radius: 4px;
  border: none;
  /*display: block;*/
  padding: 14px 0 14px 0;
}
.Code {
  width: 262px;
  text-indent: 15px;
  border-radius: 4px 0 0 4px;
  border: 1px solid #c3cbd6;
  padding: 14px 0 14px 0;
  margin-top: 16px;
}
.obtain {
  width: 118px;
  height: 44px;
  text-align: center;
  border: 1px solid #c3cbd6;
  background: #f4f4f4;
  color: #999;
  padding: 11px 0 35px 0;
  border-radius: 0 4px 4px 0;
}
.login-tip {
  color: #666;
  text-align: center;
  font-size: 15px;
}
.login-tip a {
  color: #03bb7a;
  font-weight: 700;
}
</style>